<template>
  <div class="system-dept-dialog-container">
    <el-dialog :title="dataForm.serviceName ? $t('common.detailBtn') : $t('common.detailBtn')"
               v-model="visible"
               width="1000">
      <el-form ref="servicesFormRef"
               :model="dataForm"
               label-width="90px"
               :rules="dataRules"
               v-loading="loading">
        <el-row :gutter="15">
          <el-col :span="24"
                  class="mb20">
            <el-form-item :label="$t('serivesVo.name')"
                          prop="name">
              <el-input clearable
                        v-model="dataForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24"
                  class="mb20">
            <el-form-item :label="$t('serivesVo.groupName')"
                          prop="groupName">
              <el-input clearable
                        v-model="dataForm.groupName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24"
                  class="mb20">
            <el-form-item :label="$t('serivesVo.trigger')"
                          prop="trigger">
              <el-input clearable
                        v-model="dataForm.trigger"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div style="background-color: #f5f7fa;margin: 10px 0;padding: 5px 10px;font-weight: bold;">
              <span>集群</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="table-container">
              <el-table :data="dataForm1.state"
                        border
                        height="200"
                        width="100%">
                <el-table-column align="center"
                                 type="selection"
                                 width="40" />

                <el-table-column :label="$t('serivesVo.ip')"
                                 prop="ip"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('serivesVo.port')"
                                 prop="port"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('serivesVo.weight')"
                                 prop="weight"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('serivesVo.healthy')"
                                 prop="healthy"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('serivesVo.clusterName')"
                                 prop="clusterName"
                                 show-overflow-tooltip></el-table-column>
              </el-table>
            </div>
          </el-col>

        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemDeptDialog">
import { useI18n } from 'vue-i18n';

import { getObj, pageList } from '/@/api/services/services';
import { useMessage } from '/@/hooks/message';

const index1DetailRef = ref();

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const { t } = useI18n();
// 定义变量内容
const servicesFormRef = ref();
const dataForm = reactive({
	name: '',
	ip: '',
	port: '',
	weight: '',
	healthy: '',
	enabled: '',
	ephemeral: '',
	clusterName: '',
	servicesName: '',
	groupName: '',
	trigger: '',
});

const dataForm1 = reactive({
	state: [],
});
const visible = ref(false);
const loading = ref(false);

const dataRules = ref({});
// 打开弹窗
const openDialog = (row?: any) => {
	visible.value = true;

	nextTick(() => {
		servicesFormRef.value?.resetFields();
	});
	dataForm.groupName = row.groupName;
	dataForm.trigger = row.triggerFlag;
	if (row.name) {
		dataForm.name = row.name;
		getUserData(row.name);
	}
};

/**
 * 从服务器获取用户数据
 *
 * @async
 * @param {string} name - 服务名称
 */
const getUserData = async (name: string) => {
	try {
		loading.value = true;
		let state = await getObj(name);
		dataForm1.state = state.data;
	} catch (err) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style>
.table-container {
	max-height: 400px; /* 设置容器的最大高度 */
	overflow-y: auto; /* 启用垂直滚动条 */
	overflow-x: hidden; /* 隐藏水平滚动条 */
}
</style>
